<template>
    <div class="page-container">
        <div class="form-container">
            <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="编号查询">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 30%" clearable
                                filterable>
                                <el-option label="主提单号" :value="1" />
                                <el-option label="报关提单号" :value="2" />
                                <el-option label="报关单号" :value="3" />
                                <el-option label="批准文号" :value="4" />
                                <el-option label="物流单号" :value="5" />
                                <el-option label="发货单号" :value="6" />
                            </el-select>
                            <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 70%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="报关行">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option label="主提单号" :value="1" />
                                <el-option label="报关提单号" :value="2" />
                                <el-option label="报关单号" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单证员">
                            <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="航名航次">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 30%" clearable
                                filterable>
                                <el-option label="主提单号" :value="1" />
                                <el-option label="报关提单号" :value="2" />
                                <el-option label="报关单号" :value="3" />
                            </el-select>
                            <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 70%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="单一窗口">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option label="申报成功" :value="1" />
                                <el-option label="申报失败" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="报关状态">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option label="报关单生成" :value="1" />
                                <el-option label="报关预入录" :value="2" />
                                <el-option label="审核数据通过" :value="3" />
                                <el-option label="审核表头通过" :value="4" />
                                <el-option label="提交单一窗口等反馈" :value="5" />
                                <el-option label="申报完成" :value="6" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="船公司">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option label="报关单生成" :value="1" />
                                <el-option label="报关预入录" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单证员">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option label="张三" :value="1" />
                                <el-option label="李四" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-collapse-transition>
                    <div v-show="state.hidden">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="出口日期">
                                    <el-date-picker v-model="recDateTime" type="daterange" range-separator="~"
                                        start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%"
                                        clearable value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="申报日期">
                                    <el-date-picker v-model="recDateTime" type="daterange" range-separator="~"
                                        start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%"
                                        clearable value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-collapse-transition>
                <div class="flex-container" style="margin-left: 20px">
                    <el-button type="primary" icon="search" @click="getList" size="small">
                        搜索
                    </el-button>
                    <el-button type="info" icon="refresh" @click="reset" size="small">
                        重置
                    </el-button>
                    <el-button type="primary" @click="state.hidden = !state.hidden" size="small" style="padding: 8px 15px">
                        <div class="flex-container">
                            <el-icon style="transform: rotate(90deg)">
                                <MoreFilled />
                            </el-icon>
                            {{ state.hidden ? "折叠" : "更多条件" }}
                        </div>
                    </el-button>
                </div>
            </el-form>
        </div>
        <div class="tips">
            <div class="tipsTitle">
                <div class="left">货物申报温馨提示</div>
                <div class="right" @click="state.shrink = !state.shrink" style="cursor: pointer; color: #3B78FF;">收起</div>
            </div>
            <el-collapse-transition>
                <div v-if="!state.shrink" class="tipsContent">
                    <span style="color: #606266;">申报异常：</span>您目前有5份货物申报存在异常，请及时查看
                    <span style="margin-left: 6px;color: #3B78FF;">立即查看</span>
                </div>
            </el-collapse-transition>
        </div>
        <div class="tableDiv">
            <div class="btns">
                <div class="left">
                    <el-button @click="customsDeclarationShow" type="primary">创建报关单</el-button>
                    <el-button @click="preEntry(0)" type="primary">报关预录入</el-button>
                    <el-button @click="exportShow" type="primary">清关资料导出</el-button>
                </div>
                <div class="right">
                    <el-button @click="del">删除</el-button>
                    <el-button @click="customOpen">自定义列</el-button>
                    <el-button @click="refresh" icon="RefreshRight">刷新</el-button>
                </div>
            </div>
            <AppVxeTable class="vex-table-primary" stripe :tableData="state.tableData.data" @change="getList" :height="0"
                :tableOption="state.tableData.option" v-loading="state.tableData.loading">
                <vxe-column type="checkbox" width="40" align="center" fixed="left" />
                <vxe-column sortable v-for="item in state.customColumn" :key="item.prop" :field="item.prop"
                    :title="item.label" :width="item.width" showOverflowTooltip>
                    <template v-if="item.prop === 'customsNumericalLink'" #default="{ row }">
                        <span @click="preEntry(row.DeclarationStatus)" style="color: #3B78FF; cursor: pointer;">{{
                            row.customsNumericalLink }}</span>
                    </template>
                    <template v-if="item.prop === 'customsDeclarationNumber'" #default="{ row }">
                        <span
                            :style="row.customsDeclarationNumber ? 'color: #3B78FF;color: #3B78FF; cursor: pointer;' : 'color: #606266;'">
                            {{ row.customsDeclarationNumber ? row.customsDeclarationNumber : '--' }}
                        </span>
                    </template>
                    <template v-if="item.prop === 'customsBroker'" #default="{ row }">
                        <span style="">{{ row.customsBroker }}</span>
                        <span @click="customsBrokerEdit(row.customsBroker)"
                            style="color: #3B78FF; cursor: pointer;margin-left: 5px;">修改</span>
                    </template>
                    <template v-if="item.prop === 'DeclarationStatus'" #default="{ row }">
                        <div style="display: flex;align-items: center;">
                            <div :style="row.DeclarationStatus === 5 ? 'background:#00000099; ' : 'background: #3B78FF; '"
                                style="border-radius: 50%;width: 6px;height: 6px;margin-right: 5px;">
                            </div>
                            <span style="">{{ DeclarationStatus[row.DeclarationStatus] }}</span>
                        </div>
                    </template>
                    <template v-if="item.prop === 'FeedbackState'" #default="{ row }">
                        <div style="display: flex;align-items: center;">
                            <div v-if="row.FeedbackState"
                                :style="row.FeedbackState === '申报成功' || !row.FeedbackState ? 'background:#79B43C; ' : 'background: #FF0000; '"
                                style="border-radius: 50%;width: 6px;height: 6px;margin-right: 5px;">
                            </div>
                            <span style="">{{ row.FeedbackState ? row.FeedbackState : '--' }}</span>
                        </div>
                    </template>
                </vxe-column>

            </AppVxeTable>
        </div>
        <!-- 自定义列 -->
        <el-dialog class="dialog" v-model="state.custom.show" title="自定义列" width="800" :before-close="customHandleClose">
            <Draggbale ref="draggbale" :items="state.customColumn"></Draggbale>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetDraggbale">重置</el-button>
                    <el-button @click="customHandleClose">取消</el-button>
                    <el-button type="primary" @click="saveDraggbale">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 创建报关单 -->
        <el-dialog class="dialog" v-model="state.customsDeclaration.show" title="创建报关单" width="800"
            :before-close="truckingOrderClose">
            <div class="customsDeclaration">
                <div style="border: 0;" class="form-container">
                    <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="主提单号">
                                    <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                        filterable>
                                        <el-option label="主提单号" :value="1" />
                                        <el-option label="报关提单号" :value="2" />
                                        <el-option label="报关单号" :value="3" />
                                        <el-option label="批准文号" :value="4" />
                                        <el-option label="物流单号" :value="5" />
                                        <el-option label="发货单号" :value="6" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="箱号">
                                    <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button style="float: right;" type="primary">查询</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="tip">选择合适的装箱单</div>
                <el-table ref="taskTableRef" border stripe @select="truckingOrderChange"
                    :data="state.customsDeclaration.data" v-loading="state.customsDeclaration.loading">
                    <el-table-column type="selection" width="40" align="center" fixed="left" />
                    <el-table-column align="center" showOverflowTooltip sortable label="主提单号" prop="ConsignNum">
                    </el-table-column>
                    <el-table-column align="center" showOverflowTooltip sortable label="报关提单号" prop="Boxbox">
                    </el-table-column>
                    <el-table-column align="center" showOverflowTooltip sortable label="箱型尺寸" prop="haulingState">
                    </el-table-column>
                    <el-table-column align="center" showOverflowTooltip sortable label="箱号" prop="haulingState">
                    </el-table-column>
                    <el-table-column align="center" showOverflowTooltip sortable label="封号" prop="haulingState">
                    </el-table-column>
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="truckingOrderClose">取消</el-button>
                    <el-button type="primary" @click="truckingOrderSave">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 清关资料导出 -->
        <el-dialog class="dialog" v-model="state.export.show" title="清关资料导出" width="800" :before-close="truckingOrderClose">
            <div class="export">
                <div class="left">
                    <el-table ref="exportRef" border stripe @select="texportChange" :data="state.export.data">
                        <el-table-column type="selection" width="40" align="center" fixed="left" />
                        <el-table-column align="center" showOverflowTooltip label="清关资料" prop="name">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="right">
                    <div class="riTitle">
                        合同预览
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="truckingOrderClose">取消</el-button>
                    <el-button @click="truckingOrderClose">全部导出</el-button>
                    <el-button type="primary" @click="truckingOrderSave">
                        单个导出
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 报关行修改 -->
        <el-dialog class="dialog" v-model="state.customsBroker.show" title="报关行修改" width="320"
            :before-close="truckingOrderClose">
            <el-form-item label="修改报关行">
                <el-select v-model="state.customsBroker.form" placeholder="请选择" style="width: 100%" clearable filterable>
                    <el-option label="君和泵业报关行" value="君和泵业报关行" />
                </el-select>
            </el-form-item>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="truckingOrderClose">取消并返回</el-button>
                    <el-button type="primary" @click="truckingOrderSave">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import request from "@/public/request";
import { MoreFilled } from "@element-plus/icons";
import { fileDownload } from "@/public/publicUtils";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import AppVxeTable from "@/components/AppVxeTable.vue";
import { useStore } from "vuex";
import Draggbale from './components/draggbale.vue'

const Store = useStore();

const Router = useRouter();
const route = useRoute();

//报关状态
let DeclarationStatus = {
    0: '报关单生成',
    1: '货物申报',
    2: '表头审核',
    3: '表体审核',
    4: '提交单一窗口等待反馈',
    5: '申报结果',
}

const state = reactive({
    // 查询条件
    query: {},
    //自定义列
    customColumn: [
        { prop: 'mainNumericalLink', label: '主提单号', width: '120' },
        { prop: 'customsNumericalLink', label: '报关提单号', width: '120' },
        { prop: 'customsDeclarationNumber', label: '报关单号', width: '120' },
        { prop: 'approvalNumber', label: '批准文号', width: '120' },
        { prop: 'ContractAgreementNumber', label: '合同协议号', width: '130' },
        { prop: 'shipmenttrackingNumber', label: '发货单号', width: '120' },
        { prop: 'USDTotalAmount', label: 'USD总金额', width: '120' },
        { prop: 'customsBroker', label: '报关行', width: '170' },
        { prop: 'vouchingClerk', label: '单证员', width: '120' },
        { prop: 'DeclarationStatus', label: '报关当前状态', width: '170' },
        { prop: 'FeedbackState', label: '单一窗口数据反馈状态', width: '170' },
        { prop: 'CaseSize', label: '箱型尺寸', width: '100' },
        { prop: 'caseNumber', label: '箱号', width: '100' },
        { prop: 'title', label: '封号', width: '100' },
        { prop: 'RenamoCountry', label: '抵运国', width: '100' },
        { prop: 'transshipmentPort', label: '中转港(目的地)', width: '130' },
        { prop: 'namedPort', label: '指定港', width: '100' },
        { prop: 'shipsName', label: '船名', width: '100' },
        { prop: 'voyage', label: '航次', width: '100' },
        { prop: 'deliveryTerms', label: '成交方式', width: '100' },
        { prop: 'packageKind', label: '包装种类', width: '100' },
        { prop: 'roughWeight', label: '毛重(KG)', width: '100' },
        { prop: 'suttle', label: '净重(KG)', width: '130' },
        { prop: 'CustomsDeclaration', label: '申报地海关', width: '130' },
        { prop: 'serialNumber', label: '统一编号', width: '100' },
        { prop: 'preentryNumber', label: '预录入编号', width: '130' },
        { prop: 'customsSerialNumber', label: '海关编号', width: '100' },
        { prop: 'EnterTheCustoms', label: '进境关别', width: '100' },
        { prop: 'putOnRecordsNum', label: '备案号', width: '100' },
        { prop: 'departureData', label: '出口日期', width: '100' },
        { prop: 'declareData', label: '申报日期', width: '100' },
        { prop: 'DomesticConsignee', label: '境内收货人', width: '130' },
        { prop: 'ForeignConsignee', label: '境外收货人', width: '130' },
        { prop: 'licenseKey', label: '许可证号', width: '100' },
        { prop: 'freight', label: '运费', width: '100' },
        { prop: 'premium', label: '保险费', width: '100' },
        { prop: 'incidentals', label: '杂费', width: '100' },
        { prop: 'casesNumber', label: '件数', width: '100' },
        { prop: 'exitPort', label: '出境口岸', width: '100' },
        { prop: 'storagePlace', label: '货物存放地点', width: '130' },
        { prop: 'customsDeclarationState', label: '报关单类型', width: '130' },
        { prop: 'markingMark', label: '标记唛码', width: '100' },
        { prop: 'businessMatters', label: '业务事项', width: '100' },
        { prop: 'remark', label: '备注', width: '100' },
        { prop: 'exemptionNature', label: '征免性质', width: '100' },
        { prop: 'tradingCountry', label: '贸易国别', width: '100' },
    ],
    //表格数据
    tableData: {
        data: [
            {
                mainNumericalLink: 'NGZF22568600',
                customsNumericalLink: 'ONEYNB21B5058400',
                customsDeclarationNumber: "",
                approvalNumber: "",
                ContractAgreementNumber: "JH2401704",
                shipmenttrackingNumber: "JH2401704",
                USDTotalAmount: "2,500,000",
                customsBroker: "君和泵业报关行",
                vouchingClerk: "赵雾瑕",
                DeclarationStatus: 0,
                FeedbackState: "",
                CaseSize: "20GP",
                caseNumber: "X12345678",
                title: "F12456789",
                RenamoCountry: "POLAND",
                transshipmentPort: "Gdynia",
                namedPort: "NINGBO",
                shipsName: "NYK CLARA",
                voyage: "231W",
                deliveryTerms: "FOB",
                packageKind: "ARRELS",
                roughWeight: "19.7218",
                suttle: "19.7218",
            },
            {
                mainNumericalLink: 'ONEYNB21B505',
                customsNumericalLink: 'NGZF22568600',
                customsDeclarationNumber: "",
                approvalNumber: "",
                ContractAgreementNumber: "JH2401704",
                shipmenttrackingNumber: "JH2401704",
                USDTotalAmount: "2,500,000",
                customsBroker: "君和泵业报关行",
                vouchingClerk: "李磊",
                DeclarationStatus: 1,
                FeedbackState: "",
                CaseSize: "20GP",
                caseNumber: "X12345678",
                title: "F12456789",
                RenamoCountry: "POLAND",
                transshipmentPort: "Gdynia",
                namedPort: "NINGBO",
                shipsName: "NYK CLARA",
                voyage: "231W",
                deliveryTerms: "FOB",
                packageKind: "ARRELS",
                roughWeight: "19.7218",
                suttle: "19.7218",
            },
            {
                mainNumericalLink: 'NGZF22568601',
                customsNumericalLink: 'ONEYNB21B5058400',
                customsDeclarationNumber: "",
                approvalNumber: "",
                ContractAgreementNumber: "JH2401704",
                shipmenttrackingNumber: "JH2401704",
                USDTotalAmount: "2,500,000",
                customsBroker: "君和泵业报关行",
                vouchingClerk: "王龠曦",
                DeclarationStatus: 2,
                FeedbackState: "",
                CaseSize: "20GP",
                caseNumber: "X12345678",
                title: "F12456789",
                RenamoCountry: "POLAND",
                transshipmentPort: "Gdynia",
                namedPort: "NINGBO",
                shipsName: "NYK CLARA",
                voyage: "231W",
                deliveryTerms: "FOB",
                packageKind: "ARRELS",
                roughWeight: "19.7218",
                suttle: "19.7218",
            },
            {
                mainNumericalLink: 'NGZF22568602',
                customsNumericalLink: 'HLCXGB88790',
                customsDeclarationNumber: "",
                approvalNumber: "",
                ContractAgreementNumber: "JH2401704",
                shipmenttrackingNumber: "JH2401704",
                USDTotalAmount: "2,500,000",
                customsBroker: "君和泵业报关行",
                vouchingClerk: "吴恒",
                DeclarationStatus: 3,
                FeedbackState: "",
                CaseSize: "20GP",
                caseNumber: "X12345678",
                title: "F12456789",
                RenamoCountry: "POLAND",
                transshipmentPort: "Gdynia",
                namedPort: "NINGBO",
                shipsName: "NYK CLARA",
                voyage: "231W",
                deliveryTerms: "FOB",
                packageKind: "ARRELS",
                roughWeight: "19.7218",
                suttle: "19.7218",
            },
            {
                mainNumericalLink: 'EGLV143251700',
                customsNumericalLink: 'EGLV143251700462A',
                customsDeclarationNumber: "",
                approvalNumber: "",
                ContractAgreementNumber: "JH2401704",
                shipmenttrackingNumber: "JH2401704",
                USDTotalAmount: "2,500,000",
                customsBroker: "君和泵业报关行",
                vouchingClerk: "李嘉城",
                DeclarationStatus: 4,
                FeedbackState: "",
                CaseSize: "20GP",
                caseNumber: "X12345678",
                title: "F12456789",
                RenamoCountry: "POLAND",
                transshipmentPort: "Gdynia",
                namedPort: "NINGBO",
                shipsName: "NYK CLARA",
                voyage: "231W",
                deliveryTerms: "FOB",
                packageKind: "ARRELS",
                roughWeight: "19.7218",
                suttle: "19.7218",
            },
            {
                mainNumericalLink: 'EGLV143251700',
                customsNumericalLink: 'EGLV143251700462B',
                customsDeclarationNumber: "EGLV143251700462B",
                approvalNumber: "EGLV1432",
                ContractAgreementNumber: "JH2401704",
                shipmenttrackingNumber: "JH2401704",
                USDTotalAmount: "2,500,000",
                customsBroker: "君和泵业报关行",
                vouchingClerk: "孙娴茹",
                DeclarationStatus: 5,
                FeedbackState: "申报成功",
                CaseSize: "20GP",
                caseNumber: "X12345678",
                title: "F12456789",
                RenamoCountry: "POLAND",
                transshipmentPort: "Gdynia",
                namedPort: "NINGBO",
                shipsName: "NYK CLARA",
                voyage: "231W",
                deliveryTerms: "FOB",
                packageKind: "ARRELS",
                roughWeight: "19.7218",
                suttle: "19.7218",
            },
            {
                mainNumericalLink: 'EGLV146551200',
                customsNumericalLink: 'HLCXGB88790',
                customsDeclarationNumber: "",
                approvalNumber: "",
                ContractAgreementNumber: "JH2401704",
                shipmenttrackingNumber: "JH2401704",
                USDTotalAmount: "2,500,000",
                customsBroker: "君和泵业报关行",
                vouchingClerk: "王琪逸",
                DeclarationStatus: 5,
                FeedbackState: "申报失败",
                CaseSize: "20GP",
                caseNumber: "X12345678",
                title: "F12456789",
                RenamoCountry: "POLAND",
                transshipmentPort: "Gdynia",
                namedPort: "NINGBO",
                shipsName: "NYK CLARA",
                voyage: "231W",
                deliveryTerms: "FOB",
                packageKind: "ARRELS",
                roughWeight: "19.7218",
                suttle: "19.7218",
            },
        ],
        option: useTableOption(),
    },
    //自定义列数据
    custom: {
        show: false,
        data: []
    },
    //报关单Dialog
    customsDeclaration: {
        show: false,
        data: [],
        form: {},
        loading: false,
    },
    //清关资料
    export: {
        show: false,
        data: [
            { name: '报关发票' },
            { name: '合同' },
            { name: '报关单' },
            { name: '箱单' },
        ],
    },
    //报关行
    customsBroker: {
        show: false,
        form: ''
    }

})
function preEntry(val) {
    Router.openTab({
        path: "/cargoDeclaration/cargoDeclarationDetail",
        query: {
            title: val == 0 ? '报关预录入' : '报关资料详情',
            state: val
        },
    });
}


//自定义列dialog打开
function customOpen() {
    state.custom.show = true
}

//自定义列dialog关闭
function customHandleClose() {
    state.custom.show = false
}

//重置自定义列
function resetDraggbale() {
    ElMessage.success('重置成功')
    customHandleClose()
}

//保存自定义列
function saveDraggbale() {
    ElMessage.success('保存成功')
}

//刷新
function refresh() {
    ElMessage.success('刷新成功')
}

//报关单弹窗
function customsDeclarationShow() {
    state.customsDeclaration.show = true
}
//创建报关单单选
const taskTableRef = ref();
function truckingOrderChange(selection, row) {
    if (selection.length > 1) {
        let del_row = selection.shift();
        taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
    }
    state.truckingOrder.pick = selection
}

//清关资料导出
const exportRef = ref();
function texportChange(selection, row) {
    if (selection.length > 1) {
        let del_row = selection.shift();
        exportRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
    }
    state.truckingOrder.pick = selection
}

//清关资料show
function exportShow() {
    state.export.show = true
}

//报关行show
function customsBrokerEdit(val) {
    state.customsBroker.show = true
    state.customsBroker.form = val
}

</script>

<style lang="scss" scoped>
.form-container {
    border: 1px solid #e8e8e8;
    padding: 6px 6px 6px 8px;
    background-color: #ffffff;

    :deep(.el-form-item--small .el-form-item__label) {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.85);
    }

    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 4px;
    }

    :deep(.el-form--inline .el-form-item) {
        display: flex;
        margin-right: 0;
    }

    :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 8px;
    }
}

:deep(.el-checkbox.el-checkbox--large) {
    height: 0px;
}

:deep(.el-dialog__footer) {
    padding-bottom: 10px;
    text-align: center;
}

:deep(.el-table__cell) {
    height: auto;
}

:deep(.el-dropdown) {
    margin-right: 10px;
}

:deep(.el-message-box) {
    width: 240px !important;
}

.tips {
    width: 100%;
    border: 1px solid #FFE58F;
    margin-top: 8px;
    padding: 4px;
    background: #FFFBE6;

    .tipsTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 8px;
    }

    .tipsContent {
        span {
            cursor: pointer;
        }
    }
}

.tableDiv {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background-color: #ffffff;

    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 28px;
        // background-color: aqua;
        margin-bottom: 10px;
    }
}

.customsDeclaration {

    .tip {
        color: #000000D8;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0px;
        margin-bottom: 8px;
    }
}

.export {
    display: flex;
    justify-content: space-between;

    .left {
        width: 150px;
        margin-right: 8px;
    }

    .right {
        width: 100%;

        .riTitle {
            width: 100%;
            height: 38px;
            background-color: #F2F3F5;
            text-align: center;
            line-height: 38px;
        }
    }
}

:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
}
</style>